<template>
  <div>
    <el-container :style="{ background: background, color: color }">
      <el-container>
        <el-main>
          <el-row type="flex" justify="center">
            <el-col :span="16" :xs="24">
              <el-dropdown>
                <span class="el-dropdown-link">
                  <i class="el-icon-menu"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item index="/home">
                    <router-link to="/home">{{
                      $t("header.home")
                    }}</router-link>
                  </el-dropdown-item>
                  <el-dropdown-item index="/topics">
                    <router-link to="/topics">{{
                      $t("header.topic")
                    }}</router-link>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <router-link to="/archive">{{
                      $t("header.archive")
                    }}</router-link>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button
                      type="text"
                      @click="blackMode(true)"
                      v-if="!black"
                      >黑夜模式</el-button
                    >
                    <el-button type="text" @click="blackMode(false)" v-else
                      >白天模式</el-button
                    >
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>

          <!-- 大尺寸头部 -->
          <el-row type="flex" justify="center" class="hidden-xs-only">
            <el-col :span="16" :xs="{ span: 24, offset: 0 }">
              <div
                class="item-top"
                :style="{ background: background, color: color }"
              >
                <h1 :style="{ background: background, color: color }">
                  {{ articleDate.title }}
                </h1>
                <div class="text-center timeAndView">
                  <span class="article-time">
                    <i class="el-icon-time"></i>
                    <span> {{ articleDate.createTime }}</span>
                  </span>
                  &nbsp;|&nbsp;
                  <span class="article-views">
                    <i class="el-icon-view"></i>
                    <span> {{ articleExtend.browseNum }}</span>
                  </span>
                </div>
              </div>
            </el-col>
          </el-row>

          <!-- 小尺寸头部 -->
          <el-row type="flex" justify="center" class="hidden-sm-and-up">
            <el-col :span="24">
              <div :style="{ background: background, color: color }">
                <p style="text-align: center; font-weight: 600">
                  {{ articleDate.title }}
                </p>
              </div>

              <div :style="{ background: background, color: color }">
                <div class="text-center timeAndView-mini">
                  <span class="article-time">
                    <i class="el-icon-time"></i>
                    <span> {{ articleDate.createTime }}</span>
                  </span>
                  &nbsp;|&nbsp;
                  <span class="article-views">
                    <i class="el-icon-view"></i>
                    <span> {{ articleExtend.browseNum }}</span>
                  </span>
                </div>
              </div>
            </el-col>
          </el-row>

          <!-- 文章内容区 -->
          <el-row type="flex" justify="center">
            <div class="table hidden-md-and-down">
              <el-link
                :underline="false"
                href="/"
                style="font-weight: bold; font-size: 1.2em;margin-right:10px"
                ><i
                  class="el-icon-s-home"
                  :style="{ background: background, color: color }"
                >
                  首页</i
                ></el-link
              >


              <el-button
                type="text"
                @click="blackMode(true)"
                v-if="!black"
                style="font-weight: bold; font-size: 1.2em; color: black"
                ><i class="el-icon-moon"> 夜间模式</i></el-button
              >
              <el-button
                type="text"
                @click="blackMode(false)"
                style="font-weight: bold; font-size: 1.2em; color: white"
                v-else
                ><i class="el-icon-sunny">日间模式</i></el-button
              >
            </div>
            <el-col :span="16" :xs="24">
              <div
                id="artcle-content"
                class="content"
                v-html="articleDate.content"
                v-highlight
                :style="{ background: background, color: color }"
              ></div>
            </el-col>

            <div class="catalog hidden-md-and-down" :style="{ color: color }">
              <h1>目录</h1>
              <div
                class="white_catalog"
                v-html="articleDate.dir"
                v-if="!black"
              ></div>
              <div class="black_catalog" v-html="articleDate.dir" v-else></div>
            </div>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { getArticle, praise } from "@/api/apis";
export default {
  name: "article",
  data() {
    return {
      articleDate: {},
      articleExtend: {},
      drawer: true,
      back: "/",
      dirheight: "600px",
      background: "white",
      color: "#363636",
      black: false,
    };
  },
  mounted() {
    this.getArticle();
  },
  methods: {
    getArticle() {
      let atcId = this.$route.query.id;
      window.console.log(atcId);
      getArticle({
        atcId: atcId,
        flag: 1,
      }).then((res) => {
        this.articleDate = res.data;
        this.articleExtend = this.articleDate.articleExtend;
      });
    },
    praise(type) {
      let atcId = this.$route.query.id;
      praise({
        type: type,
        atcId: atcId,
      }).then(({ data }) => {
        if (data == 1) {
          this.$layer.msg("感谢");
        } else if (data == -1) {
          this.$layer.msg("请不要重复点击哦");
        }
        getArticle({
          atcId: atcId,
          flag: 1,
        }).then((res) => {
          let articleDate = res.data;
          this.articleExtend = articleDate.articleExtend;
        });
      });
    },
    blackMode(mode) {
      window.console.log(this.black);
      this.black = mode;
      if (this.black) {
        this.color = "#b8bfc6";
        this.background = "rgb(54,59,64)";
      } else {
        this.color = "#363636";
        this.background = "white";
      }
    },
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      //因为当钩子执行前，组件实例还没被创建
      // vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
      vm.back = from.path;
    });
  },
};
</script>

<style>
#artcle-info {
  padding: 20px;
  background-image: url("../assets/article-title.jpg");
  margin-bottom: 40px;
}

#item-top .abstract {
  color: #ffffff;
  border-left: 3px solid #f56c6c;
  padding: 10px;
  background-color: rgba(126, 129, 135, 0.3);
}

.table {
  position: fixed;
  /* background: black; */
  left: 0;
  top: 10px;
  padding: 10px;
  border-radius: 5px;
}

.catalog {
  position: fixed;
  left: 0px;
  top: 120px;
  padding: 0 10px;
  width: 13%;
  /* border-radius: 5px; */
  font-weight: 200;
  font-size: 1em;
  /* border-left: 1px solid; */
  line-height: 1.4em;
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap; /*规定段落中的文本不进行换行 */
}
.white_catalog a {
  color: #363636;
  font-weight: 100;
  line-height: 1.5em;
  width: 100%;
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap; /*规定段落中的文本不进行换行 */
  display: block;
}

.black_catalog a {
  color: #b8bfc6;
  font-weight: 100;
  line-height: 1.5em;
  width: 100%;
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap; /*规定段落中的文本不进行换行 */
  display: block;
}

.catalog h2 {
  margin-left: 1em;
}

.catalog h3 {
  margin-left: 2em;
}

.catalog h4 {
  margin-left: 3em;
}

.catalog .title {
  font-size: 1.5em;
  border-bottom: 1px solid;
  text-align: center;
  line-height: 2em;
}

.timeAndView {
  padding: 20px;
  line-height: 20px;
  font-size: 16px;
  background-color: #363636;
  text-align: center;
  color: white;
}
.timeAndView-mini {
  padding: 10px;
  margin: 0 -20px;
  line-height: 20px;
  font-size: 16px;
  background-color: #363636;
  text-align: center;
  color: white;
}
.content {
  font-weight: 400 !important;
  line-height: 1.8 !important;
  /* color: #363636 !important; */
}

.content h1 {
  font-weight: 400 !important;
  line-height: 1.8 !important;
  font-size: 1.8em;
  border-left: 5px solid;
  padding-left: 10px;
  margin-bottom: 10px;
}

.content h2 {
  font-weight: 400 !important;
  line-height: 1.8 !important;
  font-size: 1.5em;
}

.content h3 {
  font-weight: 400 !important;
  line-height: 1.8 !important;
  font-size: 1.3em;
}

.content h4 {
  font-weight: 400 !important;
  line-height: 1.8 !important;
  font-size: 1.2em;
}

pre.has {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.8);
}

img.has {
  width: 100%;
}

#statement {
  border-left: 3px solid #f56c6c;
  padding: 20px;
  background-color: #ebeef5;
}

.article-title {
  color: white;
  text-align: center;
  border-bottom: solid 1px;
  padding-bottom: 10px;
}

pre {
  overflow-x: auto;
}
a {
  color: rgba(0, 0, 0, 0.65);
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
}

div[yne-bulb-block="paragraph"] {
  background-color: rgba(0, 0, 0, 0);
  /* color: #363636 !important; */
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", Helvetica,
    Tahoma, Arial, "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, SimSun, 宋体,
    Heiti, 黑体, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  /* height: 40px; */
  line-height: 1.8;
  overflow-wrap: break-word;
  pointer-events: all;
  text-decoration-color: rgb(57, 57, 57);
  text-decoration-line: none;
  text-decoration-style: solid;
  text-rendering: optimizelegibility;
  text-size-adjust: 100%;
  white-space: pre-wrap;
  /* width: 620px; */
  word-break: break-word;
}

#artcle-content div[yne-bulb-type] {
  font-weight: 400 !important;
  line-height: 1.8 !important;
  color: #363636 !important;
}

#artcle-content div[yne-bulb-type="catalogue-wrap"] {
  display: none !important;
}

img {
  max-width: 100% !important;
}
</style>